<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="batchPassVisible"
    :before-close="closeDialog"
    width="47%"
  >

    <div v-show="isShowRateFrom">
      <div
        v-for="(item, index) in sourceForm"
        :key="index"
        class="itemDiv flex align-center"
      >
        <div class="leftDiv" />
        <div class="rate_div">
          <el-form
            :inline="true"
            :model="item"
            class="demo-form-inline"
          >
            <el-form-item label="订单来源设置：" class="firstlabel">
              <el-select
                v-model="item.source_id"
                placeholder="请选择订单来源"
                style="width: 170px"
                @change="changeSourceId"
              >
                <el-option
                  v-for="item in sourceList"
                  :key="item.id"
                  :label="item.source_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="合同" class="itemlabel" prop="smartcontract">
              <el-input
                v-model="item.smartcontract"
                placeholder="1.50"
              />
              <span class="itemlabel">元</span>
            </el-form-item>
            <el-form-item label="实名认证" class="itemlabel" prop="realname">
              <el-input v-model="item.realname" placeholder="0.40" />
              <span class="itemlabel">元</span>
            </el-form-item> -->
            <el-form-item label="平台" class="itemlabel" prop="platform">
              <el-input v-model="item.platform" placeholder="8.00" />
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item label="代扣" class="itemlabel" prop="withhold">
              <el-input v-model="item.withhold" placeholder="1.60" />
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item label="存证" class="itemlabel" prop="file">
              <el-input v-model="item.file" placeholder="0.45" />
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item class="delBtn">
              <el-button type="text" @click="deleteFrom(item, index)">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <p class="p">
        手续费类型可选填，填写的手续费类型将显示到账单手续费明细中
      </p>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addSource"
      >新增订单来源</el-button>
    </div>
    <el-form
      v-show="isShowRefuseFrom"
      ref="batchRefuseForm"
      :model="batchRefuseForm"
    >
      <el-form-item
        label="原因："
        label-width="120px"
        prop="check_refuse_type"
        :rules="[
          { required: true, message: '请输入原因', trigger: 'blur' },
        ]"
      >
        <el-select
          v-model="batchRefuseForm.check_refuse_type"
          placeholder="请选择"
          @change="changeOption"
        >
          <el-option
            v-for="item in refuseList"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="其他原因："
        label-width="120px"
        :rules="[
          { required: isRequired, message: '请输入原因', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="batchRefuseForm.check_refuse_reason"
          type="textarea"
          placeholder="请输入备注原因信息！例如：图片不符合规范"
          prop="check_refuse_reason"
          :rows="3"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <h3 class="tableTitle">{{ batchPassTitle }}</h3>
    <el-table :data="batchPassData" border>
      <el-table-column prop="shopname" label="供应商名称" />
      <el-table-column prop="category_name" label="品类名称" />
    </el-table>
    <h5 class="tableTitle total">共{{ batchPassTotal }}个品类</h5>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitPass('batchRefuseForm')">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogTitle: {
      type: String
    },
    batchPassTitle: {
      type: String
    },
    batchPassTotal: {
      type: Number
    },
    batchPassVisible: {
      type: Boolean,
      default: false
    },
    batchPassData: {
      type: Array,
      default: () => []
    },
    refuseList: {
      type: Array,
      default: () => []
    },
    batchRefuseForm: {
      type: Object,
      default: () => ({})
    },
    isShowRefuseFrom: {
      type: Boolean,
      default: false
    },
    isShowRateFrom: {
      type: Boolean,
      default: false
    },
    isRequired: {
      type: Boolean,
      default: false
    },
    sourceList: {
      type: Array,
      default: () => []
    },
    sourceForm: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    closeDialog(param) {
      this.$emit('closeDialog', param)
    },
    submitPass(param) {
      // console.log('param',param, this.isShowRateFrom)
      if (this.isShowRateFrom) {
        // console.log('param',this.sourceForm)
        let flag = false
        this.sourceForm.forEach((item) => {
          for (var key in item) {
            if (key == 'source_id' && !item[key]) {
              this.$message.error('请选择订单来源')
              flag = false
              return false
            } else if (key != 'source_id' && key != 'is_delete') {
              if (!item[key]) {
                this.$message.error('请确保已设置费率')
                flag = false
                return false
              } else if (item[key]) {
                var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
                if (!isNum.test(item[key])) {
                  this.$message.error('费率为正数且最多两位小数')
                  flag = false
                  return false
                } else {
                  flag = true
                  return
                }
              }
            } else {
              flag = true
            }
          }
        })
        if (this.sourceForm.length > 1) {
          const ids = this.sourceForm.map((item) => item.source_id)
          const idsSet = new Set(ids)
          if (idsSet.size != ids.length) {
            this.$message.error('订单来源不能重复')
            flag = false
            return false
          } else {
            flag = true
          }
        }
        if (flag) {
          this.$emit('submitPass', this.sourceForm)
        }
      } else {
        this.$emit('submitPass', param)
      }
    },
    changeOption(param) {
      this.$emit('changeOption', param)
    },
    addSource(param) {
      this.$emit('addSource')
    },
    deleteFrom(item, index) {
      this.$emit('deleteFrom', item, index)
    },
    changeSourceId(val) {
      this.$emit('changeSourceId', val)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body{
  height: 600px;
  overflow: auto;
}
.tableTitle{
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  text-align: center;
  line-height: 35px;
  margin-bottom: 10px;
}
.total{
  font-size: 14px;
  margin-top: 10px;
  color: #999999;
}
/deep/.el-dialog__body{
  padding: 20px;
}
.goodsList{
  height: 100px;
  padding: 5px 10px;
  // border-bottom: 1px solid #E6E6E6;
  border-radius: 3px;
}

.itemDiv {
  background: #f5f5f5;
  padding: 8px 20px;
  position: relative;
  margin-bottom: 20px;
  .leftDiv {
    width: 300px;
  }
  .firstlabel {
    width: 300px;
    position: absolute;
    top: 40%;
    left: 15px;
  }
  .delBtn {
    position: absolute;
    top: 40%;
    right: 15px;
  }
}
.rate_div {
  width: 55%;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 0 12px;
  .el-form .el-input {
    width: 80px;
  }
  .itemlabel {
    padding: 0 10px;
    background: #e6e6e6;
  }
}
.p {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #cccccc;
  line-height: 40px;
}
</style>
